<template>
	<view class="kui-dialog">
		<kui-popup :close-on-click-mask="false" :radius-size="dialogRadius" ref="popupDialog" height="200rpx" @close="closedPopup">
			<view class="kui-flex kui-flex-col kui-justify-between kui-box-border" :style="rootStyle">
				<view class="kui-items-center kui-w-full">
					<!-- 标题 -->
					<slot name="title">
						<view class="kui-w-full kui-flex kui-px-3 kui-box-border" :style="titleStyle" v-if="title">
							<kui-text :color="theme.colors[state.mode]['grey'][9]" :size="`${theme.size.fonts.lg}rpx`">{{ title }}</kui-text>
						</view>
					</slot>
					<!-- 内容 -->
					<slot name="content">
						<view class="kui-w-full kui-flex kui-mt-3 kui-box-border" :style="contentStyle">
							<rich-text class="kui-flex" :nodes="content" v-if="type !== 'edit'" decode></rich-text>
							<view class="kui-my-1 kui-box-border" v-else>
								<input type="text" class="kui-text-center kui-box-border" :placeholder="placeholderText" placeholder-class="kui-text-center kui-text-gray-400 kui-text-base kui-flex kui-items-center kui-justify-center" :style="inputStyle">
							</view>
						</view>
					</slot>
				</view>
				<view class="kui-pb-0 kui-w-full kui-h-full kui-flex">
					<!-- 底部按钮组 -->
					<slot name="footer">
						<view class="kui-pb-2 kui-w-full kui-h-full" :class="[type === 'edit' ? '' : 'kui-mt-3' ]" v-if="footerType === 'margin'">
							<view class="kui-w-full kui-flex kui-justify-between kui-mt-5 kui-px-3 kui-box-border" v-if="state.footerDirection == 'row'">
								<kui-button block type="primary" text outline @click="onCancel">{{ cancelButtonText }}</kui-button>
								<view class="kui-mx-3"></view>
								<kui-button block type="primary" @click="onConfirm">{{ confirmButtonText }}</kui-button>
							</view>
							<view class="kui-h-full kui-w-full kui-flex kui-flex-col kui-justify-between kui-mb-0 kui-px-12 kui-box-border" v-if="state.footerDirection == 'column' || type === 'tips'">
								<kui-button block type="primary" text v-if="type == 'normal'" @click="onCancel">{{ cancelButtonText }}</kui-button>
								<view class="kui-mt-2"></view>
								<kui-button block type="primary" @click="onConfirm">{{ confirmButtonText }}</kui-button>
							</view>
						</view>
						<view class="kui-w-full kui-flex kui-flex-col kui-mt-5" v-else>
							<view class="kui-w-full" :style="{
								height: '0px',
								borderTop: `1rpx solid ${theme.colors[state.mode]['primary'][5]}`
							}">
							</view>
							<view class="kui-w-full kui-flex kui-justify-between kui-box-border" v-if="state.footerDirection == 'row'">
								<kui-button block type="primary" size="large" :radius="30" shape="square" text @click="onCancel">{{ cancelButtonText }}</kui-button>
								<view class="kui-w-full" :style="{
									borderTop: `1rpx solid ${theme.colors[state.mode]['primary'][5]}`,
									backgroundColor: `${theme.colors[state.mode]['primary'][5]}`,
									borderBottomRightRadius: `${30}rpx`
								}">
									<kui-button block :gradient="false" type="primary" size="large" :radius="30" shape="square" @click="onConfirm">{{ confirmButtonText }}</kui-button>
								</view>
							</view>
						</view>
					</slot>
				</view>
			</view>
		</kui-popup>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		defineComponent,
		SetupContext,
		computed,
		watch,
		CSSProperties,
		getCurrentInstance
	} from 'vue';
	
	import DialogProps from './props';
	
	const name = 'kui-dialog';
	
	export default defineComponent({
		name,
		props: DialogProps,
		emits: ['update:show', 'confirm', 'cancel'],
		options: {
			// 小程序虚拟节点设置
			virtualHost: true
		},
		setup(props, context: SetupContext) {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const state = reactive({
				mode: props.mode,
				footerDirection: props.footerDirection
			});
			
			const titleStyle = computed(() => {
				const style: CSSProperties = reactive({});
				style.justifyContent = props.titleAlign;
				style.fontSize = `${theme.size.fonts.lg}${theme.size.fontUnit}`;
				
				return style;
			});
			
			const rootStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				style.width = '580rpx';
				style.minHeight = '312rpx';
				style.padding = '56rpx 30rpx 16rpx 30rpx';
				style.padding = props.footerType === 'no-margin' ? '56rpx 0rpx 0rpx 0rpx' : style.padding;
				style.backgroundColor = theme.colors[state.mode]['grey'][0];
				style.borderRadius = `${theme.size.radiusSize[props.dialogRadius]}rpx`;
				
				return style;
			});
			
			const contentStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				style.justifyContent = props.contentAlign;
				if (props.contentAlign === 'right') {
					style.justifyContent = 'flex-end';
				}
				style.color = theme.colors[state.mode]['grey'][5];
				style.fontSize = `${theme.size.fonts.base}rpx`;
				style.padding = props.footerType === 'no-margin' ? '30rpx' : '';
				
				return style;
			});
			
			const inputStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				style.caretColor = theme.colors[state.mode]['primary'][5];
				style.backgroundColor = theme.colors[state.mode]['grey'][1];
				style.padding = '15rpx 40rpx';
				style.borderRadius = `${theme.size.radiusSize.xl}rpx`;
				style.color = theme.colors[state.mode]['grey'][8];
				style.height = style.lineHeight = '80rpx';
				
				return style;
			})
			
			const getType = (type: any = 'normal') => {
				if (type === 'normal') {
					state.footerDirection = state.footerDirection ? state.footerDirection : 'row';
				}
				if (type === 'tips') {
					state.footerDirection = 'column';
				}
				if (type === 'edit') {
					state.footerDirection = 'row';
				}
			}
			
			getType();
			
			watch(
				() => [props.show, props.type, props.footerDirection],
				(newVal) => {
					if (newVal[0]) {
						proxy.$refs['popupDialog'].open();
					}
					getType(newVal[1]);
					if (newVal[2]) {
						state.footerDirection = newVal[2];
					}
				}
			);
			
			const closedPopup = () => {
				context.emit('update:show',  false);
			}
			
			const onCancel = () => {
				context.emit('cancel');
				proxy.$refs['popupDialog'].forceClose();
			}
			
			const onConfirm = () => {
				context.emit('confirm');
				proxy.$refs['popupDialog'].forceClose();
			}
			
			const cancel = () => {
				onCancel();
			}
			
			const confirm = () => {
				onConfirm();
			}
			
			uni.$on("changeMode", (e) => {
				state.mode = e;
				// changeMode();
			});
			
			return {
				state,
				rootStyle,
				titleStyle,
				contentStyle,
				inputStyle,
				closedPopup,
				theme,
				getType,
				onCancel,
				onConfirm,
				cancel,
				confirm
			}
		}
	});
</script>

<style>

</style>